<template>
  <el-container>
      <el-header height="80px" style="padding: 0;">
        <div class="header">教务系统学生管理</div>
      </el-header>
      <el-container>
        <el-aside width="200px">
            <el-menu
                default-active="1"
                unique-opened="true"
                @select="selectFunc"
                class="aside"
            >
                <el-sub-menu index="1">
                    <template #title>
                        <span>七年级</span>
                    </template>
                    <el-menu-item index="1">1班</el-menu-item>
                    <el-menu-item index="2">2班</el-menu-item>
                    <el-menu-item index="3">3班</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <span>八年级</span>
                    </template>
                    <el-menu-item index="4">1班</el-menu-item>
                    <el-menu-item index="5">2班</el-menu-item>
                    <el-menu-item index="6">3班</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="7">
                    <template #title>
                        <span>九年级</span>
                    </template>
                    <el-menu-item index="7">1班</el-menu-item>
                    <el-menu-item index="8">2班</el-menu-item>
                    <el-menu-item index="9">3班</el-menu-item>
                </el-sub-menu>
            </el-menu>        
        </el-aside>
        <el-container>
          <el-header height='80px' style="padding: 0; margin: 0;">
            <el-container class="subHeader">
                <div class="desc">{{ desc }}</div>
                <el-button style="width: 100px; height: 30px; margin: 20px;">新增记录</el-button>
            </el-container>
          </el-header>
          <el-main style="margin: 0; padding: 0;">
            <div class="content">
                <el-table :data="stus">
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="age" label="年龄" />
                    <el-table-column prop="sex" label="性别" />
                    <el-table-column prop="date" label="录入日期" />
                </el-table>
            </div>
          </el-main>
          <el-footer height="30px" class="footer">Vue框架，Element Plus提供组件支持</el-footer>
        </el-container>
      </el-container>  
    </el-container>
</template>

<script>

export default {
    name: 'Home',
    data(){
        return {
            desc: "七年级1班学生统计",
            stus: [
                {
                    name: '小王',
                    age: 14,
                    sex: '男',
                    date: '2020年8月15日'
                },{
                
                    name: '小张',
                    age: 15,
                    sex: '男',
                    date: '2020年5月15日'
                },{
                
                    name: '小李',
                    age: 14,
                    sex: '女',
                    date: '2020年6月15日'
                },{
                
                    name: '小秋',
                    age: 15,
                    sex: '女',
                    date: '2020年8月15日'
                },
            ]
        }
    },
    methods: {
        selectFunc(index){
            let strs = ["七", "八", "九"]
            let rank = strs[Math.floor((index-1)/3)]
            this.desc = `${rank}年级${((index-1)% 3)+ 1}班学生统计`
        }
    }
}

</script>


<style scoped>
.header{
    font-size: 30px;
    line-height: 80px;
    background-color: #f1f1f1;
}
.aside{
    background-color: wheat;
    height: 600px;
}
.subHeader{
    background-color: cornflowerblue;
    text-align: center;
}
.desc{
    font-size: 25px;
    line-height: 80px;
    color: white;
    width: 800px;
}
.content{
    height: 410px;
}
.footer{
    background-color: dimgray;
    font-size: 17px;
    line-height: 30px;
}
</style>
